<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>积分规则 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .tab-active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .rule-item {
      border-bottom: 1px solid var(--border);
    }
    
    .rule-item:last-child {
      border-bottom: none;
    }
    
    .rule-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="javascript:history.back()" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">积分规则</h1>
      <div class="w-5"></div>
    </div>
    
    <!-- 标签页 -->
    <div class="px-4 border-b border-gray-200">
      <div class="flex">
        <div class="tab-active px-6 py-3 text-center">
          <span>获取规则</span>
        </div>
        <div class="px-6 py-3 text-center text-gray-500">
          <span>使用规则</span>
        </div>
        <div class="px-6 py-3 text-center text-gray-500">
          <span>常见问题</span>
        </div>
      </div>
    </div>
    
    <!-- 获取规则 -->
    <div id="earn-rules" class="px-4 py-4">
      <div class="bg-white rounded-lg">
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-blue-100 text-blue-500 mr-3">
              <i class="fas fa-user-plus"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">注册奖励</h3>
              <p class="text-xs text-gray-500 mt-1">新用户注册成功即可获得积分奖励</p>
            </div>
            <div class="text-sm primary-color font-medium">+50积分</div>
          </div>
        </div>
        
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-green-100 text-green-500 mr-3">
              <i class="fas fa-calendar-check"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">每日签到</h3>
              <p class="text-xs text-gray-500 mt-1">每日签到可获得积分，连续签到额外奖励</p>
            </div>
            <div class="text-sm primary-color font-medium">+3积分/天</div>
          </div>
        </div>
        
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-yellow-100 text-yellow-500 mr-3">
              <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">完成订单</h3>
              <p class="text-xs text-gray-500 mt-1">订单完成后获得积分，按订单金额计算</p>
            </div>
            <div class="text-sm primary-color font-medium">订单金额1%</div>
          </div>
        </div>
        
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-purple-100 text-purple-500 mr-3">
              <i class="fas fa-comment-dots"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">评价订单</h3>
              <p class="text-xs text-gray-500 mt-1">订单完成后进行评价可获得额外积分</p>
            </div>
            <div class="text-sm primary-color font-medium">+5积分/次</div>
          </div>
        </div>
        
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-red-100 text-red-500 mr-3">
              <i class="fas fa-share-alt"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">邀请好友</h3>
              <p class="text-xs text-gray-500 mt-1">邀请好友注册并完成首单可获得积分</p>
            </div>
            <div class="text-sm primary-color font-medium">+50积分/人</div>
          </div>
        </div>
        
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-indigo-100 text-indigo-500 mr-3">
              <i class="fas fa-crown"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">会员等级加成</h3>
              <p class="text-xs text-gray-500 mt-1">不同会员等级有不同积分加成比例</p>
            </div>
            <div class="text-sm primary-color font-medium">最高1.5倍</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 使用规则 -->
    <div id="use-rules" class="px-4 py-4 hidden">
      <div class="bg-white rounded-lg">
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-blue-100 text-blue-500 mr-3">
              <i class="fas fa-ticket-alt"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">兑换优惠券</h3>
              <p class="text-xs text-gray-500 mt-1">可使用积分兑换不同面额的优惠券</p>
            </div>
            <div class="text-sm text-gray-500">100-300积分</div>
          </div>
        </div>
        
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-green-100 text-green-500 mr-3">
              <i class="fas fa-gift"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">兑换实物礼品</h3>
              <p class="text-xs text-gray-500 mt-1">可使用积分兑换品牌周边及生活用品</p>
            </div>
            <div class="text-sm text-gray-500">300-1500积分</div>
          </div>
        </div>
        
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-yellow-100 text-yellow-500 mr-3">
              <i class="fas fa-concierge-bell"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">兑换服务券</h3>
              <p class="text-xs text-gray-500 mt-1">可使用积分兑换各类服务体验</p>
            </div>
            <div class="text-sm text-gray-500">800-1200积分</div>
          </div>
        </div>
        
        <div class="rule-item p-4">
          <div class="flex items-center">
            <div class="rule-icon bg-purple-100 text-purple-500 mr-3">
              <i class="fas fa-shopping-bag"></i>
            </div>
            <div class="flex-1">
              <h3 class="font-medium">下单抵扣</h3>
              <p class="text-xs text-gray-500 mt-1">下单时可使用积分抵扣部分金额</p>
            </div>
            <div class="text-sm text-gray-500">100积分=1元</div>
          </div>
        </div>
      </div>
      
      <div class="mt-4 p-4 bg-white rounded-lg">
        <h3 class="font-medium mb-2">积分有效期说明</h3>
        <p class="text-sm text-gray-500">
          1. 积分有效期为获得之日起1年<br>
          2. 即将过期的积分会在到期前1个月提醒<br>
          3. 会员等级越高，积分有效期越长<br>
          4. 使用积分时，优先使用即将过期的积分
        </p>
      </div>
    </div>
    
    <!-- 常见问题 -->
    <div id="faq" class="px-4 py-4 hidden">
      <div class="bg-white rounded-lg">
        <div class="rule-item p-4">
          <h3 class="font-medium mb-2">如何查看我的积分？</h3>
          <p class="text-sm text-gray-500">
            您可以在"我的"-"会员中心"-"我的积分"中查看积分明细和使用记录。
          </p>
        </div>
        
        <div class="rule-item p-4">
          <h3 class="font-medium mb-2">为什么我的积分没有增加？</h3>
          <p class="text-sm text-gray-500">
            订单完成后积分会在24小时内到账，如超过时间未到账，请联系客服处理。
          </p>
        </div>
        
        <div class="rule-item p-4">
          <h3 class="font-medium mb-2">积分可以转赠吗？</h3>
          <p class="text-sm text-gray-500">
            目前暂不支持积分转赠功能，未来可能会开放此功能，敬请期待。
          </p>
        </div>
        
        <div class="rule-item p-4">
          <h3 class="font-medium mb-2">退款后积分怎么处理？</h3>
          <p class="text-sm text-gray-500">
            订单退款后，该订单获得的积分将被扣除；如使用了积分抵扣，退款时积分将返还。
          </p>
        </div>
        
        <div class="rule-item p-4">
          <h3 class="font-medium mb-2">如何提高积分获取效率？</h3>
          <p class="text-sm text-gray-500">
            1. 坚持每日签到，连续签到有额外奖励<br>
            2. 升级会员等级，获得积分加成<br>
            3. 邀请好友注册使用<br>
            4. 参与平台活动，获得额外积分奖励
          </p>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 标签页切换
      const tabs = document.querySelectorAll('.px-4.border-b.border-gray-200 .px-6.py-3');
      const contentDivs = [
        document.getElementById('earn-rules'),
        document.getElementById('use-rules'),
        document.getElementById('faq')
      ];
      
      tabs.forEach((tab, index) => {
        tab.addEventListener('click', function() {
          // 移除所有标签的激活状态
          tabs.forEach(t => {
            t.classList.remove('tab-active');
            t.classList.add('text-gray-500');
          });
          
          // 激活当前标签
          this.classList.add('tab-active');
          this.classList.remove('text-gray-500');
          
          // 显示对应内容，隐藏其他内容
          contentDivs.forEach((div, i) => {
            if (i === index) {
              div.classList.remove('hidden');
            } else {
              div.classList.add('hidden');
            }
          });
        });
      });
    });
  </script>
</body>
</html> 